<template>
	<view>
		<view class="play_Relevant animated fadeInUp faster"  v-show ="isPlayRelevantShow">
			<view class="name">
				<text>{{musicInfo.playingName}}</text>
			</view>
			<view class="info u-f-ac">
				<view class="info_item">
					<view class="u-f-ac">
						<view class="info_item_img">
							<image mode="widthFix" style="width:100%"  :src="info[0].pic" />
						</view>
					<text>{{info[0].text}}</text>
					</view>
				</view>
				<view class="info_item">
					<view class="u-f-ac" >
						<view class="info_item_img">
							<image mode="widthFix" style="width:100%"  :src="info[1].pic" />
						</view>
						<text>{{info[1].text}}</text>
					</view>
				</view>
				<view class="info_item" @tap="tosonger">
					<view class="u-f-ac" >
						<view class="info_item_img">
							<image mode="widthFix" style="width:100%"  :src="info[2].pic" />
						</view>
						<text>{{info[2].text}}: {{musicInfo.playingAuthor}}</text>
					</view>
				</view>
				<view class="info_item" @tap="toplaylist">
					<view class="u-f-ac">
						<view class="info_item_img">
							<image mode="widthFix" style="width:100%"  :src="info[3].pic" />
						</view>
						<text class=".eps-1">{{info[3].text}}: {{musicInfo.playingAlbumName}}</text>   
					</view>
				</view>
			</view>
			<view class="close u-f-ajc"
			@tap="playRelevantClose"
			>
				<text>关闭</text>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState } from 'vuex';
	export default {
		props:{
			isPlayRelevantShow:Boolean
		},
		computed: {
			...mapState(['musicInfo']),
		},
		data() {
			return {
				info:[
					{
						text:'歌曲收藏',
						pic:'../../../static/playing/cm2_lay_icn_fav_new@2x.png',
					},
					{
						text:'相似歌曲',
						pic:'../../../static/playing/cm2_lay_icn_similar_new@2x.png'
					},
					{
						text:'歌手',
						pic:'../../../static/playing/cm2_lay_icn_artist_new@2x.png',
					},
					{
						text:'专辑',
						pic:'../../../static/playing/cm2_discover_icn_newest@2x.png'
					}
				]
				
			}
		},
		methods: {
			//点击关闭
			playRelevantClose(){
				this.$emit('prColse')
			},
			toplaylist(){
				uni.navigateTo({
					url:'../playlist/playlist?aid='+this.musicInfo.playingAlbumId
				})
			},
			tosonger(){
				uni.navigateTo({
					url:'../songer/songer?id='+this.musicInfo.playingAuthorId
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.play_Relevant{
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		height: 450upx;
		background-color: #b1b4b2;
		opacity: 0.99;
		z-index: 50;
		border-radius: 20upx 20upx 0 0;
		.name{
			height: 70upx;
			font-size: 26upx;
			font-weight: bold;
			color:#6e6e6f;
			padding: 20upx 0 25upx 20upx;
			border-bottom:2upx solid #777777;
		}
		.info{
			width: 100%;
			height: 300upx;
			color:#444545;
			border-bottom:3upx solid #777777;
			flex-direction: column;
			.info_item{
				width: 100%;
				padding: 5upx 0 5upx 5upx;               
				view{
					.info_item_img{
						flex: 1;
						padding-right: 10upx;
					}
					text{
						flex: 13;
						border-bottom:2upx solid #c7c7c7;
					}
				}
			}
		}
		.close{
			width: 100%;
			height: 80upx;
		}
	}
</style>
